﻿@{
    ViewBag.Title = "Home Page";
}


<link href="~/Content/bootstrap-treeview.min.css" rel="stylesheet" />

<div class="row">
    <div class="col-md-12">
        <h2>演示tree</h2>
        <button id="btnAdd" class="btn btn-default" type="submit" data-toggle="modal" data-target="#addModal">添加</button>
        <button id="btnDel" class="btn btn-default" type="submit">删除</button>
        <button id="btnEdit" class="btn btn-default" type="submit">修改</button>
        <div id="tree"></div>

    </div>

</div>
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="exampleModalLabel">添加tree</h4>
            </div>
            <div class="modal-body">
                <form id="ff">
                    <input type="hidden" class="form-control" id="FatherClassID">
                    <div class="form-group">
                        <label for="recipient-name" class="control-label">分类名称:</label>
                        <input type="text" class="form-control" id="ClassName">
                    </div>

                    <div class="form-group">
                        <label for="recipient-name" class="control-label">分类备注描述:</label>
                        <input type="text" class="form-control" id="Remark">
                    </div>

                    <div class="form-group">
                        <label for="recipient-name" class="control-label">排序索引:</label>
                        <input type="number"  class="form-control" id="OrderIndex" name="OrderIndex" >
                    </div>
                   
                </form>
            </div>
            <div class="modal-footer">
                <button id="btnAddSave" type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button id="btnEditSave" type="button" class="btn btn-primary">提交</button>
            </div>
        </div>
    </div>
</div>
@section  myscripts{
    <script src="~/Content/bootstrap-treeview.min.js"></script>
<script src="~/Content/jquery.validate.min.js"></script>
    <script>
        var selectid = "";
        $(function () {
            bindtree();
            $("#ff").validate({
                rules: {
                    OrderIndex: {
                        required: true,
                        number: true
                    }
                }
            });
           


            $('#btnDel').click(function () {
                $.post("/Home/Del/" + selectid, { "func": "getNameAndTime" },
   function (data) {
       alert("  " + data.Msg);
       bindtree();
   }, "json");
            });

            $('#btnAddSave').click(function () {
                $.post("/Home/AddSave/", { "FatherClassID": $('#FatherClassID').val(), "ClassName": $('#ClassName').val() },
   function (data) {
       alert("  " + data.Msg);
       bindtree();
   }, "json");
            }); 
        });
        function getTree() {
            var html = $.ajax({
                url: "/Home/GetTreeJson",
                async: false
            }).responseText;
            return $.parseJSON(html);
        }
        function bindtree()
        {
            $('#tree').treeview({
                data: getTree(),
                onNodeSelected: function (event, data) {
                    selectid = data.id;
                }
            });
        }
    </script>

}
